<template>
  <div class="common-layout">
    <el-container>
      <el-aside width="200px">
        <el-menu
          active-text-color="#ffd04b"
          background-color="#545c64"
          class="el-menu-vertical-demo"
          :default-active="activeSubIndex"
          text-color="#fff"
          router
        >
          <el-sub-menu index="/home">
            <template #title>
              <el-icon><User /></el-icon>
              <span>个人中心</span>
            </template>
            <el-menu-item index="/Home/yibioapan">仪表盘</el-menu-item>
            <el-menu-item index="/Home/daibanshixiang">待办事项</el-menu-item>
            <el-menu-item index="/Home/wodexinzi">我的薪资</el-menu-item>
          </el-sub-menu>
        </el-menu>
        <el-menu
          active-text-color="#ffd04b"
          background-color="#545c64"
          class="el-menu-vertical-demo"
          :default-active="activeSubIndex"
          text-color="#fff"
          router
        >
          <el-sub-menu index="/home">
            <template #title>
              <el-icon><Memo /></el-icon>
              <span>合伙人财务查看</span>
            </template>
            <el-menu-item index="/Home/niandulingqu">年度领取查看</el-menu-item>
            <el-menu-item index="/Home/daibanshixiang">收入分配查看</el-menu-item>
            <el-menu-item index="1-3">合伙人财务统计</el-menu-item>
            <el-menu-item index="1-3">差旅费用查看</el-menu-item>
            <el-menu-item index="1-3">往来费用查看</el-menu-item>
          </el-sub-menu>
        </el-menu>
      </el-aside>
      <el-main><router-view></router-view></el-main>
    </el-container>
  </div>
</template>

<script setup lang="ts">
import { computed, onMounted } from 'vue'
import { useRoute, useRouter } from 'vue-router'

const route = useRoute()
const router = useRouter()

// 确保首次加载时也能选中默认子菜单
onMounted(() => {
  if (route.path === '/home') {
    router.push('/Home/yibioapan')
  }
})

const activeSubIndex = computed(() => {
  // 返回当前路径作为激活的菜单项
  return route.path
})
</script>

<style scoped></style>
